<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{itineraryChooseItineraryTypeManagedBean.initView}"/>
        <p:menubar model="#{itineraryChooseItineraryTypeManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{itineraryChooseItineraryTypeManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">
        <h:form id="formMain">
            <p:confirmDialog message="Are you sure about changing your reservation info? You have to pay the change fee of #{reservationManagerBean.getChangeFee()} plus the difference between new and old deposit (if the former is bigger)" 
                             showEffect="bounce" hideEffect="explode" header="Confirm change reservation" severity="alert" widgetVar="acceptconfirmation"> 
                <p:commandButton value="Yes" update="accordion" onclick="acceptconfirmation.hide()" actionListener="#{reservationManagerBean.confirmChangeReservationInfo}" /> 
                <p:commandButton value="No" onclick="acceptconfirmation.hide()" type="button" /> 
            </p:confirmDialog>
            <p:ajaxStatus style="width:16px;height:16px;">
                <f:facet name="start">
                    <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
            <p:messages />

            <p:accordionPanel style="width:850px;" autoHeight="true" id="accordion">
                <p:tab title="Summary">
                    <p:panel id="basicInfo" header="Basic Info" style="position:relative; float:left; width:400px; height:600px;" >
                        <p>
                            <h:outputText value="Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;"/>
                            <h:outputText value="#{reservationManagerBean.getReservedDate()}" style="font-weight: bold"/>
                        </p>
                        <p>
                            <h:outputText  value="Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:   "/>
                            <h:outputText value="#{reservationManagerBean.reservation.timeBegin}" style="font-weight: bold"/>
                        </p>
                        <p>
                            <h:outputText  value="Number of people:" /> 
                            <h:selectOneMenu value="#{reservationManagerBean.reservation.noOfPeople}" id="eatingTimeList">
                                <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                                <f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
                                <f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
                                <f:selectItem itemLabel="4" itemValue="4"></f:selectItem>
                                <f:selectItem itemLabel="5" itemValue="5"></f:selectItem>
                                <f:selectItem itemLabel="6" itemValue="6"></f:selectItem>
                                <f:selectItem itemLabel="7" itemValue="7"></f:selectItem>
                                <f:selectItem itemLabel="8" itemValue="8"></f:selectItem>
                                <f:selectItem itemLabel="9" itemValue="9"></f:selectItem>
                                <f:selectItem itemLabel="10" itemValue="10"></f:selectItem>
                                <f:selectItem itemLabel="11" itemValue="11"></f:selectItem>
                                <f:selectItem itemLabel="12" itemValue="12"></f:selectItem>
                                <f:selectItem itemLabel="13" itemValue="13"></f:selectItem>
                                <f:selectItem itemLabel="14" itemValue="14"></f:selectItem>
                                <f:selectItem itemLabel="15" itemValue="15"></f:selectItem>
                                <f:selectItem itemLabel="16" itemValue="16"></f:selectItem>
                                <f:selectItem itemLabel="17" itemValue="17"></f:selectItem>
                                <f:selectItem itemLabel="18" itemValue="18"></f:selectItem> 
                                <f:selectItem itemLabel="19" itemValue="19"></f:selectItem>
                                <f:selectItem itemLabel="20" itemValue="20"></f:selectItem>
                            </h:selectOneMenu>
                        </p>
                        <h:outputText value="Total offline bill &nbsp;&nbsp;&nbsp;:" />
                        <h:outputText value="#{reservationManagerBean.totalBill}" style="font-weight: bold; color:blue;"/>
                        <p>
                            <h:outputText value="Total online bill&nbsp;&nbsp;&nbsp;&nbsp;:" />
                            <h:outputText value="#{reservationManagerBean.discountBill}" style="font-weight: bold; color:red;"/>
                        </p>
                        <p>
                            <h:outputText value="You Save&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" />
                            <h:outputText value="#{reservationManagerBean.totalBill - reservationManagerBean.discountBill}" style="font-weight: bold; color:purple;"/>
                        </p>
                        <p>
                            <h:outputText value="Current Deposit&nbsp;&nbsp;&nbsp;&nbsp;:"/>
                            <h:outputText value="#{reservationManagerBean.previousDeposit}" style="font-weight: bold; color:#245522;"/>
                        </p>
                        <p>
                            <h:outputText value="New Deposit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:"/>
                            <h:outputText value="#{reservationManagerBean.reservation.deposit}" style="font-weight: bold; color:#2c284b;"/>
                        </p>
                        <h:outputText value="Special Request: " />
                        <p:inputTextarea value="#{reservationManagerBean.reservation.specialRequest}" style="width:300px; height:200px"/>                                       
                        <p:commandButton id="btn2" value="Change basic info" update="accordion" actionListener="#{reservationManagerBean.changeBasicInfo}"/>
                        <p:commandButton id="btn" value="Confirm Reservation" update="accordion" onclick="acceptconfirmation.show()" type="button"/>
                    </p:panel>

                    <p:panel id="menu" header="Your menu" style="width:350px; height: 600px; position: relative; float:left;">  
                        <c:forEach items="#{reservationManagerBean.listOfFoodType}" var="food" varStatus="current">
                            <h:outputText value="#{food.name}" styleClass="menu"/>

                            <p:dataList value="#{reservationManagerBean.choiceList.get(current.index)}" var="selectedProduct" type="ordered" style="width:200%" >  
                                #{selectedProduct.name} 
                            </p:dataList> 

                        </c:forEach>
                        <h:outputText value="Set Meal" styleClass="menu"/>
                        <p:dataList value="#{reservationManagerBean.choiceList.get(reservationManagerBean.listOfCategory.size()-1)}" var="selectedProduct" type="ordered" style="width:400%">  
                            #{selectedProduct.name}
                        </p:dataList>
                    </p:panel>   
                </p:tab>

                <p:tab title="Table Info">
                    <p:dataTable id="table" var="table" value="#{reservationManagerBean.tableList}" 
                                 rowIndexVar="row" paginator="true" rows="3">
                        <p:column headerText="Picture">
                            <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{table.imageURL}" width="150" height="120"></h:graphicImage>
                        </p:column>

                        <p:column headerText="Name">
                            <h:outputText value="#{table.name}" />
                        </p:column>

                        <p:column headerText="Description">
                            <h:outputText value="#{table.description}" />
                        </p:column>

                        <p:column headerText="Seats">
                            <h:outputText value="#{table.unitCapacity}" />
                        </p:column>

                        <p:column headerText="Quantity">
                            <h:selectOneMenu value="#{reservationManagerBean.index}">
                                <f:selectItems value="#{reservationManagerBean.quantityAvail[reservationManagerBean.getTablePos(table.id)]}"/>
                            </h:selectOneMenu>
                        </p:column>
                    </p:dataTable>

                    <p:commandButton id="btn1" value="Change table info" update="accordion" actionListener="#{reservationManagerBean.changeTableInfo}"/>
                </p:tab>

                <p:tab title="Meal/Set Meal Info">
                    <p:growl id="growl" showDetail="true"/>
                    <p:panel style="width:270px;float:left; height:600px; position:relative; left:-25px;">
                        <p:tabView event="click" >
                            <c:forEach items="#{reservationManagerBean.listOfFoodType}" var="food" varStatus="current">
                                <p:tab title="#{food.name}">
                                    <p:dataTable var="meal" value="#{reservationManagerBean.listOfCategory.get(current.index)}"
                                                 emptyMessage="No #{food.name}" selection="#{reservationManagerBean.selectedProduct[current.index]}"
                                                 rowSelectListener="#{reservationManagerBean.onRowSelect}"
                                                 selectionMode="single" onRowSelectUpdate="mealInfo">
                                        <p:column sortBy="#{meal.name}" filterBy="#{meal.name}">
                                            <f:facet name="header">
                                                <h:outputText value="ID" />
                                            </f:facet>
                                            <h:outputText value="#{meal.name}" />
                                        </p:column>
                                    </p:dataTable>

                                </p:tab>
                            </c:forEach>  
                            <p:tab title="Set Meal">
                                <p:dataTable var="meal" value="#{reservationManagerBean.listOfCategory.get(reservationManagerBean.listOfCategory.size()-1)}" 
                                             emptyMessage="No Set Meal" selection="#{reservationManagerBean.selectedProduct[reservationManagerBean.listOfCategory.size()-1]}"
                                             rowSelectListener="#{reservationManagerBean.onRowSelect}"
                                             selectionMode="single" onRowSelectUpdate="mealInfo">
                                    <p:column sortBy="#{meal.name}" filterBy="#{meal.name}">
                                        <f:facet name="header">
                                            <h:outputText value="ID" />
                                        </f:facet>
                                        <h:outputText value="#{meal.name}" />
                                    </p:column>
                                </p:dataTable>

                            </p:tab>
                        </p:tabView>
                    </p:panel>

                    <p:panel id="mealInfo" style="position:absolute; width: 550px;float:left; height: 600px; left:290px; top:10px">
                        <p><h:outputText value="Name:" />
                            <h:outputText value="#{reservationManagerBean.meal.name}" style="font-weight: bold"/>
                        </p>  
                        <p><h:outputText value="Description:" />
                            <h:outputText value="#{reservationManagerBean.meal.description}" style="font-weight: bold"/>
                        </p>  
                        <p><h:outputText value="" />
                            <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{reservationManagerBean.meal.imageLink}" width="500" height="350" rendered="#{reservationManagerBean.meal.imageLink != null}"></h:graphicImage>
                        </p>  
                        <p><h:outputText value="Offline Price:" />
                            <h:outputText value="#{reservationManagerBean.meal.originalPrice}" style="font-weight: bold"/>
                        </p>       

                        <p><h:outputText value="Online Price:" />
                            <h:outputText value="#{reservationManagerBean.price}" style="font-weight: bold"/>
                        </p>  

                        <p><h:outputText value="Quantity:" />
                            <h:selectOneMenu value="#{reservationManagerBean.quantity}" id="mealQuantity">
                                <f:selectItem itemLabel="0" itemValue="0"></f:selectItem>
                                <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                                <f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
                                <f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
                                <f:selectItem itemLabel="4" itemValue="4"></f:selectItem>
                                <f:selectItem itemLabel="5" itemValue="5"></f:selectItem>
                                <f:selectItem itemLabel="6" itemValue="6"></f:selectItem>
                                <f:selectItem itemLabel="7" itemValue="7"></f:selectItem>
                                <f:selectItem itemLabel="8" itemValue="8"></f:selectItem>
                                <f:selectItem itemLabel="9" itemValue="9"></f:selectItem>
                                <f:selectItem itemLabel="10" itemValue="10"></f:selectItem>
                                <f:selectItem itemLabel="11" itemValue="11"></f:selectItem>
                                <f:selectItem itemLabel="12" itemValue="12"></f:selectItem>
                                <f:selectItem itemLabel="13" itemValue="13"></f:selectItem>
                                <f:selectItem itemLabel="14" itemValue="14"></f:selectItem>
                                <f:selectItem itemLabel="15" itemValue="15"></f:selectItem>
                                <f:selectItem itemLabel="16" itemValue="16"></f:selectItem>
                                <f:selectItem itemLabel="17" itemValue="17"></f:selectItem>
                                <f:selectItem itemLabel="18" itemValue="18"></f:selectItem> 
                                <f:selectItem itemLabel="19" itemValue="19"></f:selectItem>
                                <f:selectItem itemLabel="20" itemValue="20"></f:selectItem>
                            </h:selectOneMenu>
                        </p>
                        <div style="position:absolute; bottom:0px; left: 300px;">
                            <p:commandButton value="Add" disabled="#{reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.addToList}" update="accordion" ajax="true"/>  
                            <p:commandButton value="Remove" disabled="#{!reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.removeFromList}" update="accordion" ajax="true" />
                            <p:commandButton value="Edit" disabled="#{!reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.changeValueInList}" update="accordion" ajax="true" />
                        </div>
                    </p:panel>
                </p:tab>
            </p:accordionPanel>
        </h:form>
    </ui:define>
</ui:composition>